<template>
  <el-drawer
      :title="drawerProp.title"
      :visible.sync="drawerProp.drawer"
      direction="rtl"
      :append-to-body="true"
      :modal-append-to-body="false"
      :before-close="handleClose"
      custom-class="common-drawer"
      size="1050px"
  >
    <div class="common-drawer-content" v-loading="drawerProp.loading">
      <!--<div class="time">-->
      <!--  数据更新时间：2022-06-07 11:22:29-->
      <!--</div>-->
      <div class="parent">
        <!--左边-->
        <div class="leftChild">
          <ul class="content">
            <template v-for="(item,key) in toConfigureFieldDialog.fieldProp">
              <li
                  :key="key" :class="[active===key?'active':'']"
                  @click="activeClick(key)"
                  v-show="Utils.arrayContain(item.routerRole,$store.state.routerRole)"
              >
                {{ item.name }}
              </li>
            </template>
          </ul>
        </div>
        <!--右边-->
        <div class="rightChild">
          <ul
              class="content"
              ref="scrollViewRight"
              @wheel.passive="wheelChange"
              :style="{'height': rightChildContentHeight+'px'}"
          >
            <template v-for="(item,key) in toConfigureFieldDialog.fieldProp">
              <li
                  :key="key"
                  class="content-main"
                  :ref="`drawerLi${key}`"
                  v-show="Utils.arrayContain(item.routerRole,$store.state.routerRole)"
              >
                <!--标题-->
                <div class="title">
                  <span></span>
                  <label>{{ item.name }}</label>
                  <div class="s"></div>
                  <template v-if="!item.drawerEdit">
                    <div class="n" @click="drawerEditButClick(key)">
                      <i class="el-icon-edit"></i>
                      编辑
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="!item.drawerEdit">
                  <common-drawer-see :option="item.option" :formData="formData"/>
                </div>
                <!--修改-->
                <div class="edit" v-if="item.drawerEdit">
                  <common-drawer-edit
                      :ref="`drawerFrom${key}`"
                      :option="item.option"
                      :formData="formData"
                      :titleAddEdit="toConfigureFieldDialog.titleAddEdit"
                      :drawerMethods="toConfigureFieldDialog.drawerMethods"
                  />
                </div>
              </li>
            </template>

          </ul>
        </div>
      </div>
      <div class="common-drawer-title-add-edit" v-if="toConfigureFieldDialog.titleAddEdit">
        <el-button
            icon="el-icon-close el-icon--left"
            @click="drawerTitleAddCancel"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            icon="el-icon-check el-icon--left"
            @click="drawerTitleAddSubmitForm('DrawerEdit')"
        >
          保存
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  components: {},
  props: ['drawerProp', 'toConfigureFieldDialog', 'formData'],
  data() {
    return {
      active: 0,
      rightChildContentHeight: '',//右边高度
      drawerLiArray: [],//每个li的高度
    };
  },
  mounted() {
    //计算高度 抽屉高度
    this.calculationHeight();
    //进来默认第几个
    setTimeout(() => {
      this.activeClick(0)
    }, 300)
  },
  methods: {
    //title 点击添加按钮后点击取消
    drawerTitleAddCancel() {
      this.drawerProp.drawer = false;
      this.toConfigureFieldDialog.titleAddEdit = false;
    },
    //title 点击添加按钮后点击保存 formName
    drawerTitleAddSubmitForm(formName) {
      let variableArray = [];//变量数组
      for (let i = 0; i < this.toConfigureFieldDialog.fieldProp.length; i++) {
        variableArray.push(`form${i}`);
        variableArray[i] = new Promise((resolve) => {
          this.$refs[`drawerFrom${i}`][0].$refs[formName].validate((valid) => {
            if (valid) resolve()
          })
        })
      }
      Promise.all(variableArray).then(() => {
        this.HandleUtils.handleParent(this.$parent, 'drawerTitleAddSubmitForm');
      })
    },
    //抽屉编辑图标点击
    drawerEditButClick(key) {
      this.HandleUtils.handleParent(this.$parent, 'drawerEditButClick', key);
      for (let i = 0; i < this.toConfigureFieldDialog.fieldProp.length; i++) {
        if (key === i) {
          this.toConfigureFieldDialog.fieldProp[key].drawerEdit = true
          continue
        }
        this.toConfigureFieldDialog.fieldProp[i].drawerEdit = false;
      }
      this.activeClick(key)

    },
    //计算高度 抽屉高度
    calculationHeight() {
      this.rightChildContentHeight = document.documentElement.clientHeight - 120;
    },
    //监听鼠标滚动 e
    wheelChange() {
      setTimeout(() => {
        let scrollTop = 0;
        for (let i = 0; i < this.drawerLiArray.length; i++) {
          scrollTop += this.drawerLiArray[i];
          if (scrollTop > this.$refs.scrollViewRight.scrollTop) {
            this.active = i;
            return false;
          }
        }
      }, 300)
    },
    //左边切换标题
    activeClick(key) {
      let scrollHeight = 0;
      this.drawerLiArray = [];
      for (let i = 0; i < this.toConfigureFieldDialog.fieldProp.length; i++) {
        this.drawerLiArray.push(this.$refs[`drawerLi${i}`][0].scrollHeight);
        if (key > i) {
          scrollHeight += this.$refs[`drawerLi${i}`][0].scrollHeight
        }
      }
      this.$refs.scrollViewRight.scrollTo(0, scrollHeight);
      this.active = key;
    },
    //关闭抽屉
    handleClose(done) {
      done();
    },
  },
};
</script>

<style lang="scss" scoped></style>
